<template>
<div class="tableDate">
  <div>
    <el-steps :space="200" :active="0" finish-status="success" align-center>
      <el-step title="进行中">1</el-step>
      <el-step title="填写预算明细">2</el-step>
      <el-step title="填写采购计划">3</el-step>
      <el-step title="上传附件">4</el-step>
    </el-steps>
    <div style="color: #4A5064; background-color: #C7C7C7; height: 50px; width: 95%; text-align: center; border-radius: 4px">
      <div style="font-family:'PingFangSC'; float: left; font-size: 25px; margin-top: 8px; margin-left: 10px">新增设备研制方案</div>
    </div>
  </div>

  <div style="margin-top: 5px; color: #4A5064; background-color: #ffffff; border-radius: 4px; width:95%">
    <el-form ref="form" :model="form" :rules="addFormRules" label-width="100px" style="width: 50%; padding-top: 20px; padding-bottom: 20px">
      <el-form-item label="方案编号">
        <el-input v-model="form.planId"></el-input>
      </el-form-item>
      <el-form-item label="设备">
        <el-input v-model="form.equipmentName"></el-input>
      </el-form-item>
      <el-form-item label="填报人">
        <el-input v-model="form.tbName"></el-input>
      </el-form-item>
      <el-form-item label="填报部门">
        <el-input v-model="form.tbDepartment"></el-input>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width:50%;" value-format="yyyy-MM-DD"></el-date-picker>
      </el-form-item>
      <el-form-item label="项目负责人">
        <el-input v-model="form.fzName"></el-input>
      </el-form-item>
      <el-form-item label="归口部门">
        <el-input v-model="form.fzDepartment"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <p>
    <el-button type="primary" style="width: 100px" @click="onSubmit">提交</el-button>
  </p>
</div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          ticketId: '',
          planId: '',
          equipmentName: '2',
          tbName: '2',
          tbDepartment: '2',
          date: '',
          fzName: '1',
          fzDepartment: '1',
          state: '',
        },
        addFormRules:{
          planId: [
            {
              required: true,
              message: '请输入方案编号',
              trigger: 'blur'
            }
          ],
          equipmentName: [
            {
              required: true,
              message: '请输入设备名称',
              trigger: 'blur'
            }
          ],
          tbName: [
            {
              required: true,
              message: '请输入填报人',
              trigger: 'blur'
            }
          ],
          tbDepartment: [
            {
              required: true,
              message: '请输入填报部门',
              trigger: 'blur'
            }
          ],
          date: [
            {
              required: true,
              message: '请输入活动时间',
              trigger: 'blur'
            }
          ],
          fzName: [
            {
              required: true,
              message: '请输入项目负责人',
              trigger: 'blur'
            }
          ],
          fzDepartment: [
            {
              required: true,
              message: '请输入归口部门',
              trigger: 'blur'
            }
          ]
        },
      }
    },
    methods: {
      onSubmit() {
        console.log(this.$root.planId)
        this.$root.planId = this.form.planId
        this.$refs.form.validate(async valid => {
          if(!valid) return
          //校验通过发出添加请求
          await this.$http.post('add-equipment', this.form);
          //await this.$http.post('get-ticket-id', this.form);
          await this.$router.push({ path: '/addBudget' })
        })
      }
    }
  }
</script>
